<template>
	<view class="page">
		<custom-navigation :title="title" rightTxt="保存" @rightAction="save">
		</custom-navigation>
		<scroll-view class="body-scroll" scroll-y="true">
			<view class="item-contianer flex-column">


				<view class="item flex-row-center">
					<view class="title"> 打印机名称： <text class="x">*</text></view>

					<input placeholder="请输入云打印名称" placeholder-class="input-hint" v-model="info.device_name" />
				</view>
				<picker :value="deviceModeIndex" :range="deviceModeNames" @change="e=>deviceModeIndex = e.detail.value">
					<view class="item flex-row-center">
						<view class="title">设备品牌： <text class="x">*</text></view>
						<view :class="deviceModeIndex!=-1?'value':'hint'">
							{{deviceModeNames[deviceModeIndex]||'请选择设备品牌'}}
							<image src="/static/arrow-blackmin.png" mode="heightFix"></image>
						</view>
					</view>
				</picker>

				<picker :value="deviceTypeIndex" :range="deviceTypeNames" @change="e=>deviceTypeIndex = e.detail.value">
					<view class="item flex-row-center">
						<view class="title">设备类型： <text class="x">*</text></view>
						<view :class="deviceTypeIndex!=-1?'value':'hint'">{{deviceTypeNames[deviceTypeIndex]||'请选择'}}
							<image src="/static/arrow-blackmin.png" mode="heightFix"></image>
						</view>
					</view>
				</picker>



				<picker :value="printLengthIndex" :range="printLengthNames"
					@change="e=>printLengthIndex = e.detail.value">
					<view class="item flex-row-center">
						<view class="title">纸张类型： <text class="x">*</text></view>
						<view :class="printLengthIndex!=-1?'value':'hint'">{{printLengthNames[printLengthIndex]||'请选择'}}
							<image src="/static/arrow-blackmin.png" mode="heightFix"></image>
						</view>
					</view>
				</picker>

				<picker v-if="!this.printer_info" :value="billTypeIndex" :range="billType"
					@change="e=>billTypeIndex = e.detail.value" >
					<view class="item flex-row-center">
						<view class="title">打印单据类型： <text class="x">*</text></view>
						<view :class="billTypeIndex!=-1?'value':'hint'">{{billType[billTypeIndex]||'请选择'}}
							<image src="/static/arrow-blackmin.png" mode="heightFix"></image>
						</view>
					</view>
				</picker>


				<view class="item flex-row" style="height: 150rpx;">
					<view class="title">设备编号： <text class="x">*</text> </view>

					<input placeholder="请扫描或输入设备号" placeholder-class="input-hint" v-model="info.sn"
						style="margin-top: 30rpx;" />
					<image src="/static/qrcode.png" class="qrcode-img" @click="qrcodeClick" style="margin-top: 36rpx;">
					</image>
					<view class="snhint"> {{'\n*扫描设备条形码\n，自动录入SN编号'}}</view>
				</view>
				<view class="item flex-row-center">
					<view class="title"> 设备密钥：</view>

					<input placeholder="请输入设备密钥" placeholder-class="input-hint" v-model="info.secret_key" />
				</view>

				<picker :value="deviceStateIndex" :range="deviceStateNames"
					@change="e=>deviceStateIndex = e.detail.value">
					<view class="item flex-row-center">
						<view class="title">设备状态： <text class="x">*</text></view>
						<view :class="deviceStateIndex!=-1?'value':'hint'">{{deviceStateNames[deviceStateIndex]||'请选择'}}
							<image src="/static/arrow-blackmin.png" mode="heightFix"></image>
						</view>
					</view>
				</picker>



				<picker :value="stateIndex" :range="stateList" @change="e=>stateIndex = e.detail.value">
					<view class="item flex-row-center">
						<view class="title">其他参数： <text class="x">*</text></view>
						<view class="value">{{stateList[stateIndex]}}
							<image src="/static/arrow-blackmin.png" mode="heightFix"></image>
						</view>
					</view>
				</picker>


				<view class="item flex-row-center">
					<view class="title"> 备注： <text class="x"></text></view>

					<input placeholder="请输入备注" placeholder-class="input-hint" v-model="info.remark" />
				</view>



			</view>

			<picker></picker>
		</scroll-view>
		<!-- <view class="bottom-btn flex-column-center">
			<view class="btn" @click="save">保存</view>
		</view> -->
		<view  v-if="info.id!=null " class="bottom-btn flex-column">
			<view class="flex-row-center" style="margin-left: 24rpx;">
				<view class="item2" @click="dialogType(0)" style="margin-right: 64rpx;">删除</view>
				<view class="item2" @click="dialogType(1)" style="margin-right: 64rpx;">打印测试</view>
				<view class="item1" @click="showSetting()">打印设置</view>
			</view>

			<view class="flex-row-center" style="margin-top: 20rpx;margin-left: 24rpx;">
				<view class="item2" @click="dialogType(2)">清除打印任务</view>
			</view>
		</view>

		<alert :show="dialogShow" :message="dialogMessage" @leftAction="dialogShow=false" @rightAction="dialogConfirm">
		</alert>
		<view class="dialog flex-column-center" :show="printTestDialogShow" v-if="printTestDialogShow" mode="bottom"
			bgColor="transparent" style="justify-content: flex-end;" @click="printTestDialogShow=false">
			<view @tap.stop>

				<view :class="['dialog-container',printTestDialogShow?'showDialog':'']" @tap.stop>
					<view class="title-box">
						<view>打印设置</view>
						<image src="/static/close.png" @click="printTestDialogShow=false"></image>
					</view>

					<!-- <view class="r flex-row-center" @tap.stop>打印单据类型：
						<view class="value flex-row-center">{{printsettingInfo.bill_type}}
							<image src="/static//arrow-bottom2.png" mode="widthFix"></image>
						</view>
					</view> -->

					<picker :disabled="true" :value="billTypeIndex" :range="billType"
						@change="e=>billTypeIndex = e.detail.value" style="z-index: 222222;">
						<view class="r flex-row-center">打印单据类型：
							<view class="value flex-row-center">{{billType[billTypeIndex]}}
								<image src="/static//arrow-bottom2.png" mode="widthFix"></image>
							</view>
						</view>
					</picker>

					<picker :value="printModelIndex" :range="printModelTitle"
						@change="e=>printModelIndex = e.detail.value" style="z-index: 222222;">
						<view class="r flex-row-center">订单模板：
							<view class="value flex-row-center">{{printModelTitle[printModelIndex]}}
								<image src="/static//arrow-bottom2.png" mode="widthFix"></image>
							</view>
						</view>
					</picker>
					<picker :value="lindex" :range="lnums" @change="e=>lindex = e.detail.value"
						style="z-index: 222222;">
						<view class="r flex-row-center">订单打印联数：
							<view class="value flex-row-center">{{lnums[lindex]}}
								<image src="/static//arrow-bottom2.png" mode="widthFix"></image>
							</view>
						</view>
					</picker>
					<view class="r flex-row-center" @tap.stop>订单付款后打印：
						<view class="radio-group flex-row">
							<view v-for="item in ddhkList" class="radio" @click="itemRadioCheck(item,ddhkList)">
								<image :src="item.check?'/static/check2.png':'/static/uncheck.png'"></image>
								<text>{{item.name}}</text>
							</view>
						</view>
					</view>
					<view class="r flex-row-center" @tap.stop>打印样式尺寸预览：{{printLengthNames[printLengthIndex]||'请选择'}}

					</view>

					<view class="preview flex-column-center" @click="previewclick">
						<!-- 	<view class="name">品名：可乐</view>
						<view class="name">规格：大瓶</view>
						<view class="name">售价：6.00元</view> -->
						<view class="qrcode"></view>
					</view>

					<view class="previewhint">点击查看打印模板</view>

					<view class="bottom-box flex-row-center" @tap.stop>
						<view class="cancel" @click="printTestDialogShow=false">取消</view>
						<view class="confirm" @click="confirmEntry">确定</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import dsBridge from 'dsbridge'
	export default {

		data() {
			return {
				title: '新增云打印机',
				printTestDialogShow: false,
				type: 0,
				dialogShow: false,
				dialogMessage: "是否确定上架所选商品？",
				extensionShow: false,
				stateIndex: 0,
				stateList: ["生效", "禁用", "挂失"],
				ddhkIndex: 0,
				lindex: 0,
				lnums: ['1张', '2张', '3张', '4张', '5张', '6张', '7张', '8张'],
				ddhkList: [{
					name: '自动出单',
					check: true
				}, {
					name: '手动打印'
				}],
				info: {
					// "device_name": "54654", //名称
					// "device_type": "print", //类型
					// "type_name": "云打印", //类型名称
					// "device_model": "XH202210210017", //设备 model_no
					// "model_name": "商米云打印", //设备 model_name
					// "model_code": "16", // 设备 model_no
					// "equipment_type": "门店云打印设备",
					// "equipment_model": "云打印",
					sn: "", //编号
					// "device_state": "正常", //设备专题
					// "bill_type": "商品标签打印",
					// "print_length": 55.0,

					// "secret_key": "14654646",
					// "online_state": "离线",
					// "bind_state": "未绑定",
					// "bill_mode": "自动打印"
				},
				deviceModes: [], //品牌列表
				deviceModeNames: [],
				deviceModeIndex: -1,

				deviceTypes: [], //品牌列表
				deviceTypeNames: [],
				deviceTypeIndex: -1,
				printLengthNames: ['58打印纸', '80打印纸'],
				printLengthIndex: -1,
				deviceStateIndex: -1,
				deviceStateNames: ['正常', '禁用'],
				remarkIndex: -1,
				remarks: ['芯烨打印机', '商米云打印', '佳博云标签（标签票据）', '易联云打印', '新国都云打印', '佳博云打印', '加博云标签',
					'证通云打印-4G', '芯烨云标签', '移动（商米）云打印'
				],
				printer_info: {},
				printsettingInfo: {},
				printModelTitle: [],
				billType: ['商品标签打印','订单小票打印'],
				printModelIndex: -1,
				billTypeIndex: -1,
				printModels: []
			}

		},
		onLoad(options) {
			let jsonstr = uni.getStorageSync("printer_info");
			if (jsonstr != null && jsonstr.length != 0)
				this.printer_info = JSON.parse(jsonstr)
			else
				this.printer_info = null
			if (this.printer_info != null) {
				this.title = "编辑云打印机"
				uni.setStorageSync("printer_info", null)
				this.info = {
					id: this.printer_info.id,
					"device_name": this.printer_info.device_name, //名称
					// "device_type": "print", //类型
					"type_name": this.printer_info.type_name, //"云打印", //类型名称
					// "device_model": "XH202210210017", //设备 model_no
					// "model_name": "商米云打印", //设备 model_name
					"model_code": this.printer_info.model_code, // 设备 model_no
					"equipment_type": this.printer_info.equipment_type,
					"equipment_model": this.printer_info.equipment_model,
					"sn": this.printer_info.sn, //编号
					"device_state": this.printer_info.device_state, // "正常", //设备专题
					remark: this.printer_info.remark,
					other_info: this.printer_info.other_info,
					paper_type: this.printer_info.paper_type,
					"bill_type": this.printer_info.bill_type,
					"print_length": this.printer_info.print_length,
					"secret_key": this.printer_info.secret_key,
					"online_state": this.printer_info.online_state,
					"bind_state": this.printer_info.bind_state,
					"bill_mode": this.printer_info.bill_mode,
				}

				for (let i in this.deviceStateNames) {
					if (this.info.device_state == this.deviceStateNames[i]) {
						this.deviceStateIndex = i
					}
				}
				for (let i in this.printLengthNames) {
					console.log("aa" + this.printLengthNames[i] + ":" + this.info.paper_type)
					if (this.info.paper_type == this.printLengthNames[i]) {
						this.printLengthIndex = i
					}
				}
				for (let i in this.stateList) {
					if (this.info.other_info == this.stateList[i]) {
						this.stateIndex = i
					}
				}
				this.getPrintSettingInfo()
			}
			this.getDeviceModeList()
			this.getDeviceTypeList()
		},

		methods: {
			previewclick() {
				var token = dsBridge.call("getToken");
				if (token == '' || token == undefined) {
					token = uni.getStorageSync("token") ?? ''
				}
				var img=	`http://139.196.209.46:4882/file/download?fileNo=${this.printModels[this.printModelIndex].print_preview}&bx_auth_ticket=${token}`
				
				uni.previewImage({current:0,
					urls: [img]
				})
			},
			showSetting() {
				this.printTestDialogShow = true
				this.getPrintModels()
			},

			confirmEntry() {
				if(this.deviceStateIndex==1){
					this.$showToast("设备已禁用")
					return
				}
				uni.showLoading({
					title: "测试中..."
				})

				let printContent =
					"<CB>天天零售店</CB><BR>\n<L>交易时间：2020-10-11 21:00:33</L>\n<L>订单编号:202211300005</L>     \n<L>状态：已结账</L>\n<L>收银员:王晓晓</L>  \n<L>营业员：李策</L>\n<L><N>--------------------------------</N></L></HB>\n商品名称       数量      金额\n<L><N>--------------------------------</N></L></HB>\n<L><N>1.矿泉水      </N></L>\n<R>5              7.5<R></HB>\n<L><N>--------------------------------</N></L></HB>\n<L>商品总价:</L><R>￥7.5</R></HB>\n<L><N>--------------------------------</N></L>\n<L>商品总数:5件</L>\n<L>应付:7.5</L>\n<L>付款方式:现金  </L>\n<L>实收:7.5</L>\n<L><N>--------------------------------</N></L></HB>\n<L>门店地址:陕西省西安市八府庄</L>\n<L>门店电话:029-86754417</L>"

				this.$apiPost("/retail/operate/srvls_device_print", [{
					"serviceName": "srvls_device_print",
					"data": [{
						"store_no": this.printer_info.store_no,
						"sn": this.printer_info.sn,
						"printContent": this.printer_info.content_sample_new
					}]
				}]).then(res => {
					uni.hideLoading()
					if (res.state == 'SUCCESS') {
						this.$showToast("成功");
						this.printTestDialogShow = false;
						setTimeout(() => {}, 1500)
					}
				})
			},
			dialogConfirm() {
				this.dialogShow = false
				if (this.type == 0) this.del()
				else if (this.type == 1) //是否确认测试打印？
					this.printTestDialogShow = true;
				else if (this.type == 2) //是否确认测试打印？
					this.cancel()

			},
			dialogType(type) {
				if (type == 0) //删除
					this.dialogMessage = '是否确认删除云打印机？';
				else if (type == 1) //是否确认测试打印？
					this.dialogMessage = '是否确认测试打印？';
				else if (type == 2) //是否确认测试打印？
					this.dialogMessage = '是否确定取消所有未打印订单？';

				this.dialogShow = true;
				this.type = type;
			},

			cancel() {
				uni.showLoading({
					title: "清除中..."
				})
				this.$apiPost("/retail/operate/srvls_device_print_cancel", [{
					"serviceName": "srvls_device_print_cancel",
					"data": [{
						"store_no": this.printer_info.store_no,
						"sn": this.printer_info.sn,
					}]
				}]).then(res => {
					uni.hideLoading()
					if (res.state == 'SUCCESS') {
						this.$showToast("成功");
						uni.setStorageSync("refresh", true)
						uni.navigateBack()
						setTimeout(() => {}, 1500)
					}
				})
			},
			del() {
				uni.showLoading({
					title: "删除中..."
				})
				this.$apiPost("/retail/operate/srvdev_device_printer_delete", [{
					"serviceName": "srvdev_device_printer_delete",
					"condition": [{
						"colName": "id",
						"ruleType": "in",
						"value": this.info.id
					}]
				}]).then(res => {
					uni.hideLoading()
					if (res.state == 'SUCCESS') {
						this.$showToast("成功");
						uni.setStorageSync("refresh", true)
						uni.navigateBack()
						setTimeout(() => {}, 1500)
					}
				})
			},
			qrcodeClick() {
				let ths = this;
				dsBridge.call("QRCode", {}, function(res) {
					if (res) {
						ths.info.sn = "" + res
					}
				})
			},
			save() {
				let hint = null;
				if ((this.info.device_name ?? '').length == 0) {
					hint = "请输入打印机名称"
				} else if ((this.info.sn ?? '').length == 0) {
					hint = "请输入设备编号"
				} else if (this.deviceModeIndex == -1) {
					hint = "请选择设备品牌"
				} else if (this.deviceTypeIndex == -1) {
					hint = "请选择设备类型"
				} else if (this.printLengthIndex == -1) {
					hint = "请选择纸张类型"
				}
				if (this.pass_word != this.confirm_pass_word) {
					hint = "两次输入的密码不一样！"
				}
				if (hint?.length > 0) {
					this.$showToast(hint)
					return;
				}

				this.info.device_model = this.deviceModes[this.deviceModeIndex].model_no
				this.info.model_name = this.deviceModes[this.deviceModeIndex].model_name
				this.info.model_code = this.deviceModes[this.deviceModeIndex].model_code
				this.info.device_type = this.deviceTypes[this.deviceTypeIndex].device_type
				this.info.type_name = this.deviceTypes[this.deviceTypeIndex].type_name
				this.info.equipment_model = "云打印" //enum('云打印','USB设备')
				this.info.equipment_type = "门店云打印设备" //enum('门店云打印设备','收款云打印设备')
				this.info.device_state = this.deviceStateNames[this.deviceStateIndex]
				this.info.bind_state = "未绑定"
				this.info.bill_type = this.billType[this.billTypeIndex] // "商品标签打印"
				this.info.paper_type = this.printLengthNames[this.printLengthIndex]
				this.info.other_info = this.stateList[this.stateIndex]
				this.info.online_state = "离线" //在线状态无选择
				//纸张类型 不清楚
				//其他参数 不清楚


				let url = this.info.id ? "/retail/operate/srvdev_device_printer_update" :
					"/retail/operate/srvdev_device_printer_add"
				this.$apiPost(url, [{
					"serviceName": this.info.id ? "srvdev_device_printer_update" : "srvdev_device_printer_add",
					"condition": this.info.id ? [{
						"colName": "id",
						"ruleType": "eq",
						"value": this.info.id
					}] : [],
					"data": [this.info]
				}]).then(res => {
					if (res.state == "SUCCESS") {
						uni.showToast({
							title: "成功！",
							mask: true
						})
						if (this.info.id == null) {
							this.setttingDefalut(this.info.sn)
							return;
						}
						uni.setStorageSync("refresh", true)
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					}

				})
			},

			setttingDefalut(sn) {
				uni.showLoading({
					title: "加载中..."
				})

				this.$apiPost("/retail/operate/srvdev_device_printer_defult_update", [{
					"serviceName": "srvdev_device_printer_defult_update",
					"data": [{
						"whether_defult": "是"
					}],
					"condition": [{
						"colName": "sn",
						"ruleType": "eq",
						"value": this.info.sn
					}]
				}]).then(res => {
					this.page = 1;
					uni.hideLoading()
					uni.setStorageSync("refresh", true)
					setTimeout(() => {
						uni.navigateBack()
					}, 2000)
				})
			},
			getPrintModels() {
				if (this.info.id == null  ) return;
				this.$apiPost("/retail/select/srvdev_print_templ_select", {
					"serviceName": "srvdev_print_templ_select",
					"colNames": [
						"*"
					],
					"condition": [
					// 	{
					// 	"colName": "bill_type",
					// 	"ruleType": "eq",
					// 	"value": this.printsettingInfo.bill_type
					// }, 
					{
						"colName": "paper_type",
						"ruleType": "like",
						"value": this.printLengthIndex == -1?"":   this.printLengthNames[this.printLengthIndex]
					}],
					"page": {
						"pageNo": 1,
						"rownumber": 100
					}
				}).then(res => {
					this.printModels = res.data;
					this.printModelTitle = [];
					let billType_temp=[];

					if (this.printModels.length > 0)
						this.billTypeIndex = 0
					else
						this.billTypeIndex = 1


					for (let i in res.data) {
						this.printModelTitle.push(res.data[i].template_name)
						billType_temp.push(res.data[i].bill_type)
						if(res.data[i].bill_type == this.printsettingInfo.bill_type){
							this.billTypeIndex = i;
						}
					}
					this.billType=billType_temp;
					if (this.printModelTitle.length > 0)
						this.printModelIndex = 0
					else
						this.printModelIndex = 1
				})
			},
			getPrintSettingInfo() {
				if (this.info.id == null) return;
				this.$apiPost("/retail/select/srvdev_device_printer_select", {
					"serviceName": "srvdev_device_printer_select",
					"colNames": [
						"*"
					],
					"condition": [{
						"colName": "id",
						"ruleType": "eq",
						"value": this.info.id
					}],
					"page": {
						"pageNo": 1,
						"rownumber": 1
					}
				}).then(res => {

					this.printsettingInfo = res.data[0]; 
					this.getPrintModels()
				})
			},
			getDeviceModeList() {
				this.$apiPost("/retail/select/srvsys_device_model_select", {
					"serviceName": "srvsys_device_model_select",
					"colNames": [
						"*"
					],
					"condition": [{
						"colName": "device_type",
						"ruleType": "eq",
						"value": "print"
					}],
					"page": {
						"pageNo": 1,
						"rownumber": 220
					}
				}).then(res => {
					this.deviceModes = res.data;
					let list = [];
					for (let i in this.deviceModes) {
						let item = this.deviceModes[i];
						list.push(item.model_name);
						if (this.info.model_code == item.model_code) {
							this.deviceModeIndex = i;
						}
					}
					this.deviceModeNames = list;

				})
			},
			getDeviceTypeList() {
				this.$apiPost("/retail/select/srvdev_device_type_select", {
					"serviceName": "srvdev_device_type_select",
					"colNames": [
						"*"
					],
					"condition": [{
						"colName": "device_type",
						"value": "print",
						"ruleType": "eq"
					}]
				}).then(res => {
					this.deviceTypes = res.data;
					let list = [];
					for (let i in this.deviceTypes) {
						let item = this.deviceTypes[i];
						list.push(item.type_name);
						if (this.info.type_name == item.type_name) {
							this.deviceTypeIndex = i;
						}
					}
					this.deviceTypeNames = list;

				})
			},
			switchVipPrice() {
				this.isVipPrice = !this.isVipPrice;
			},
			switchallow_min_sales_price() {
				if (this.allow_min_sales_price == '允许')
					this.allow_min_sales_price = '不允许';
				else
					this.allow_min_sales_price = '允许';
			},
			itemRadioCheck(item, list) {
				for (var i in list) {
					list[i].check = false;
				}
				item.check = true
			},
			itemCheckbox(item) {
				item.check = !(item.check ?? false)
			},
			imgsClick(current, urls) {
				uni.previewImage({
					current,
					urls
				})
			},
			addImage() { //  事件名称  （自定义）
				// let count = 3 - this.imgs.length
				uni.chooseImage({
					count: count, //  上传图片数量的控制
					success(res) {
						let tempfilepaths = res.tempfilepaths //  图片的本地文件路径列表
						tempfilepaths.forEach((item, index) => {
							if (index < count) { // 处理H5 端，多选的情况  （只有小于 count 才会被push 到数组里面）
								this.imgs.push({ // push 对象到  imageLists[] 数组里面
									url: item
								})
							}
						})
					}
				})
				let ths = this;
				dsBridge.call("chooseImage", {
					count: 1, //数量
					sourceType: "", //不填全部 album 从相册选图，camera 使用相机
				}, function(tempFilePaths) {
					alert(JSON.stringify(ret));
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.apprightbtn {
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		padding: 0 50rpx;
	}

	.title {
		min-width: 188rpx;
		box-sizing: content-box;
		padding: 28rpx 0 24rpx 24rpx;

		.line1 {
			margin-right: 14rpx;
			width: 0rpx;
			height: 26rpx;
			border: 4rpx solid #38C09E;
			border-radius: 4rpx;
		}

		text {
			color: rgba(16, 16, 16, 1);
			font-size: 32rpx;
			font-weight: 500;
		}

		.show1 {
			margin-left: 12rpx;
			padding: 8rpx 14rpx;
			border-radius: 8rpx 0 0 8rpx;
			background: rgba(56, 192, 158, 1);
			border: 1px solid rgba(56, 192, 158, 1);
			font-size: 24rpx;
			font-weight: 500;
			color: white;
		}

		.hide1 {
			margin-left: 14rpx;
			font-size: 24px;
			font-weight: 500;
			color: white;
			font-size: 24rpx;
			font-weight: 500;
			color: black;
			padding: 8rpx 14rpx;
			border-radius: 8rpx 0 0 8rpx;
			background: rgba(255, 255, 255, 1);
			border: 1px solid rgba(229, 229, 229, 1);
		}

		.show2 {
			padding: 8rpx 14rpx;
			border-radius: 0 8rpx 8rpx 0;
			background: rgba(56, 192, 158, 1);
			border: 1px solid rgba(56, 192, 158, 1);
			font-size: 24rpx;
			font-weight: 500;
			color: white;
		}

		.hide2 {

			font-size: 24px;
			font-weight: 500;
			color: white;
			font-size: 24rpx;
			font-weight: 500;
			color: black;
			padding: 8rpx 14rpx;
			border-radius: 0 8rpx 8rpx 0;
			background: rgba(255, 255, 255, 1);
			border: 1px solid rgba(229, 229, 229, 1);
		}

	}

	.vip-hint {
		height: 76rpx;
		line-height: 76rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: rgba(212, 48, 48, 1);
		margin-left: 26rpx;
	}


	.item-contianer {
		width: 100%;
		background-color: #FFFFFFFF;
		box-sizing: border-box;

		.imgs {
			margin-top: 32rpx;
			margin-right: 24rpx;
			margin-bottom: 22rpx;
			box-sizing: content-box;

			image {
				width: 160rpx;
				height: 160rpx;
				margin-left: 24rpx;
			}
		}

		.item {
			min-height: 100rpx;
			border-bottom: 2rpx solid #F5F5F7;
			padding-right: 28rpx;
			position: relative;

			.qrcode-img {
				width: 36rpx;
				height: 36rpx;
			}

			.camera-img {
				width: 68rpx;
				height: 68rpx;
			}

			.snhint {
				position: absolute;
				bottom: 25rpx;
				left: 26rpx;
				font-size: 30rpx;
				font-weight: 500;

				color: rgba(153, 153, 153, 1);
			}

			.check-box {}

			.title {
				color: rgba(16, 16, 16, 1);
				padding-left: 24rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);

				.x {
					color: #D43030;
					font-size: 32rpx;
				}
			}

			.mealedit {
				font-size: 30rpx;
				font-weight: 700;
				color: rgba(56, 192, 158, 1);
			}

			.hint {
				flex: 1;
				text-align: right;
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);

				image {
					height: 16rpx;
					width: 8rpx;
				}
			}

			.value {
				flex: 1;
				text-align: right;
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);

				image {
					height: 16rpx;
					width: 8rpx;
				}
			}

			.unit {
				color: rgba(16, 16, 16, 1);
				font-size: 28rpx;
			}

			.qrinput {
				flex: 1;
				text-align: right;
				margin-right: 12rpx;
				color: rgba(51, 51, 51, 1);
				font-size: 30rpx;
				font-weight: 700;
			}

			.qrimg {
				width: 64rpx;
				height: 64rpx;

			}

			input {
				flex: 1;
				text-align: right;
				margin-right: 12rpx;
				color: rgba(51, 51, 51, 1);
				font-size: 30rpx;
				font-weight: 500;
			}

			.input-hint {
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(153, 153, 153, 1);
			}



			.btn {
				padding: 0 8rpx;
				height: 54rpx;
				line-height: 54rpx;
				margin-left: 6rpx;
				border-radius: 12rpx;
				background: rgba(56, 192, 158, 1);
				color: rgba(255, 255, 255, 1);
				font-size: 30rpx;
				font-weight: 500;
				text-align: center;
			}

			.radio-group {
				flex-wrap: wrap;

				.radio {
					min-width: 150rpx;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
					}

					text {
						font-size: 30rpx;
						font-weight: 500;
						color: rgba(51, 51, 51, 1);
					}
				}
			}

			.check-box-group {
				padding-top: 28rpx;
				padding-bottom: 24rpx;

				.check-box1 {

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
					}

					text {
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(102, 102, 102, 1);
					}
				}
			}


		}

		.meal-box {
			padding-bottom: 24rpx;
			padding-right: 24rpx;
			min-height: 202rpx;
			width: 648rpx;
			margin-left: 28rpx;
			border: 2rpx solid rgba(224, 224, 224, 1);

			.empty {
				margin-top: 62rpx;
				margin-left: 138rpx;
				width: 376rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				text-align: center;
				border: 2rpx solid rgba(153, 153, 153, 1);
				font-size: 32rpx;
				font-weight: 700;
				color: rgba(0, 0, 0, 1);
			}

			.value {
				margin-top: 24rpx;
				margin-left: 16rpx;
				/** 文本1 */
				font-size: 28rpx;
				font-weight: 500;
			}
		}

		.item-vip {
			height: 100rpx;
			padding-right: 28rpx;


			.title {
				color: rgba(16, 16, 16, 1);
				padding-left: 24rpx;
				padding-top: 24rpx;
				font-size: 32rpx;
				font-weight: 700;

			}

			.value {
				flex: 1;
				text-align: right;
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}


			input {
				flex: 1;
				text-align: right;
				margin-right: 12rpx;
				color: rgba(51, 51, 51, 1);
				font-size: 30rpx;
				font-weight: 500;
			}

			.input-hint {
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(153, 153, 153, 1);
			}

			.vip-switch {
				width: 100rpx;
				height: 54rpx;
			}


		}

		.vip-price-box {
			margin: 0 28rpx 32rpx 28rpx;
			background-color: rgba(245, 245, 247, 1);
			box-sizing: content-box;
			border-right: 1rpx solid rgba(245, 245, 247, 1);
			border-bottom: 1rpx solid rgba(245, 245, 247, 1);

			.item1 {
				flex: 1;
				padding: 20rpx 0;
				line-height: 40rpx;
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
				background-color: white;
				margin: 1rpx;
			}

			input {
				flex: 1;
				text-align: center;
				color: rgba(51, 51, 51, 1);
				font-size: 30rpx;
				min-height: 80rpx;
				font-weight: 500;
				background-color: white;
				margin: 1rpx;
			}

			.input-hint {
				font-size: 28rpx;
				font-weight: 500;
				padding: 20rpx 0;
				line-height: 40rpx;
				text-align: center;
				color: rgba(153, 153, 153, 1);
			}
		}

	}

	.bottom-btn {
		justify-content: center;
		width: 100%;
		padding-top: 34rpx;
		padding-bottom: 34rpx;
		background: rgba(255, 255, 255, 1);

		.btn {
			width: 320rpx;
			height: 80rpx;
			border-radius: 40px;
			background: rgba(56, 192, 158, 1);
			border: 2px solid rgba(56, 192, 158, 1);
			line-height: 80rpx;
			text-align: center;
			color: white;
		}

		.item2 {
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid #333333FF;
			min-width: 192rpx;
			padding: 0 20rpx;
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 500;

		}

		.item1 {
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid rgba(56, 192, 158, 1);
			background-color: rgba(56, 192, 158, 1);
			color: white;
			width: 192rpx;
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 500;
		}

		.text {
			flex: 1;
			margin-left: 60rpx;
			font-size: 30rpx;
			font-weight: 700;

		}

	}




	.dialog-container {
		width: 750rpx;
		box-sizing: border-box;
		border-radius: 40rpx 40rpx 0 0;
		background: rgba(255, 255, 255, 1);


		.title-box {
			height: 100rpx;
			width: 100%;
			position: relative;
			border-bottom: 2rpx solid rgba(225, 225, 225, 1);
			margin-bottom: 54rpx;

			view {
				font-size: 36rpx;
				font-weight: 700;
				line-height: 100rpx;
				text-align: center;
				width: 100%;
				color: rgba(51, 51, 51, 1);
			}

			image {
				width: 72rpx;
				height: 72rpx;
				position: absolute;
				right: 10rpx;
				top: 20rpx;
			}
		}


		.preview {
			margin-top: 14rpx;
			margin-left: 64rpx;
			padding-top: 30rpx;
			width: 622rpx;
			border: 2rpx solid rgba(153, 153, 153, 1);

			.name {
				margin-bottom: 20rpx;
				font-size: 32rpx;
				font-weight: 700;
				color: rgba(102, 102, 102, 1);
			}

			.qrcode {
				margin-bottom: 20rpx;
				width: 472rpx;
				height: 244rpx;
				background: url(https://img.js.design/assets/img/636d13cdef439e62ddee10a8.png#7180a265c6bb217d4d8124e66e7240ec);
				background-size: 100% 100%;
			}
		}

		.previewhint {
			margin-top: 22rpx;
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			font-weight: 700;
			color: rgba(102, 102, 102, 1);
		}



		.r {
			padding-left: 44rpx;
			margin-bottom: 40rpx;
			font-size: 32rpx;
			font-weight: 700;
			color: rgba(51, 51, 51, 1);

			input {
				height: 48rpx;
				line-height: 48rpx;
				padding: 0 5rpx;
				text-align: center;
				opacity: 1;
				border-radius: 4rpx;
				border: 1px solid rgba(153, 153, 153, 1);
			}

			.value {
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 12rpx;
				padding: 0 54rpx;
				border: 2rpx solid rgba(153, 153, 153, 1);
				box-sizing: content-box;

				image {

					margin-left: 50rpx;
					width: 40rpx;
					height: 10rpx;
				}

			}

			.radio-group {
				flex-wrap: wrap;

				.radio {
					min-width: 230rpx;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
					}

					text {
						font-size: 30rpx;
						font-weight: 500;
						color: rgba(51, 51, 51, 1);
					}
				}
			}
		}

		.bottom-box {
			margin-top: 55rpx;
			border-top: 2rpx solid rgba(224, 222, 222, 1);

			.cancel {
				flex: 1;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 700;
				color: rgba(56, 192, 158, 1);
				background-color: white;
				border-right: 2rpx solid rgba(224, 222, 222, 1);
			}

			.confirm {
				flex: 1;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 700;
				color: rgba(51, 51, 51, 1);
				background-color: white;

			}
		}
	}

	.showDialog {
		animation: showDialog 0.3s ease-out;
	}

	// 呼吸帧
	@keyframes showDialog {
		0% {
			transform: translate(0%, 100%);
		}

		100% {
			transform: translate(0%, 0%);
		}

	}

	.dialog {
		height: 100vh;
		position: fixed;
		z-index: 1;
		background-color: #ff000000;
	}
</style>
